<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合盘结果</title>
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <script src="{$oss}/active/newyear/js/rem.js"></script>
    <link rel="stylesheet" href="/static/valentine/2021/css/common.css?v=1">
    <link rel="stylesheet" href="/static/valentine/2021/js/common.js?v=1">
    <link rel="stylesheet" href="/static/valentine/2021/css/get_with_score.css">
    <style>
        .content-box .top-box {
            width: 7.5rem;
            height: 8rem;
            background: url("{$oss}/mini/astro_synastry/title_bg.png") center top no-repeat;
            background-size: 100%;
        }

        .top-box .with-icon {
            width: 0.95rem;
            height: 0.48rem;
            position: absolute;
            left: 3.275rem;
            top: 2.33rem;
            background: url("{$oss}/mini/astro_synastry/with.png") center center no-repeat;
            background-size: 100% 100%;
        }

        .content-box .item .item-value:before {
            content: '';
            display: block;
            width: 0.23rem;
            height: 0.2rem;
            position: absolute;
            left: 0;
            top: -0.09rem;
            background: url("{$oss}/mini/astro_synastry/yinhao_left.png") center center no-repeat;
            background-size: 100%;
        }

        .content-box .item .item-value:after {
            content: '';
            display: block;
            width: 0.23rem;
            height: 0.2rem;
            position: absolute;
            right: 0;
            bottom: 0;
            background: url("{$oss}/mini/astro_synastry/yinhao_right.png") center center no-repeat;
            background-size: 100%;
        }

        .content-box .item .item-title1.gx:before {
            content: '';
            display: block;
            width: 0.37rem;
            height: 0.37rem;
            position: absolute;
            left: 0;
            top: 0.025rem;
            background: url("{$oss}/mini/astro_synastry/best.png") center center no-repeat;
            background-size: 100%;
        }

        .user-box {
            margin-top: 0.4rem;
            margin-bottom: 0.4rem;
        }

        .user-box .user-item {
            position: relative;
            box-sizing: border-box;
            line-height: 0.52rem;
            border-radius: 0.26rem;
            font-size: 0.28rem;
            font-weight: 400;
            display: inline-block;
            padding: 0 0.3rem 0 0.56rem;
            margin-right: 0.35rem;
        }

        .user-box .user-item:first-child {
            color: #6194FA;
        }

        .user-box .user-item:last-child {
            color: #F6819F;
        }

        .user-box .user-item:first-child:before {
            content: "";
            display: block;
            width: 0.1rem;
            height: 0.1rem;
            background-color: #6194FA;
            border-radius: 0.05rem;
            position: absolute;
            left: 0.3rem;
            top: 0.21rem;
        }

        .user-box .user-item:last-child:before {
            content: "";
            display: block;
            width: 0.1rem;
            height: 0.1rem;
            background-color: #F6819F;
            border-radius: 0.05rem;
            position: absolute;
            left: 0.3rem;
            top: 0.21rem;
        }

        .user-box .user-item.active:first-child {
            background-color: #D5E3FF;
            color: rgba(97, 148, 250, 1);
            font-weight: 500;
        }

        .user-box .user-item.active:last-child {
            background-color: #FFE7ED;
            color: rgba(246, 129, 159, 1);
            font-weight: 500;
        }

        .tips-box {
            color: #999999;
            margin: 0.2rem 0 0 0.57rem;
        }

        .padding-bottom60 {
            padding-bottom: 1.1rem;
        }

        .global-location {
            width: 100%;
            max-width: 750px;
            /*height: 1.68rem;*/
            height: 0.8rem;
            display: block;
            overflow: hidden;
            position: fixed;
            bottom: 0;
            z-index: 9;
            box-shadow: 0 -0.02rem 0.04rem 0 rgba(221, 221, 221, 0.5);
            background: #F5F5F5;
        }

        .global-location .logo {
            width: 0.6rem;
            height: 0.6rem;
            margin: 0.1rem 0.1rem 0.1rem 0.6rem;
            float: left;
        }

        .global-location .title {
            font-weight: bold;
            font-size: 0.22rem;
            color: #333333;
            display: flex;
            margin-top: 0.05rem;
        }

        .global-location .desc {
            font-weight: 400;
            font-size: 0.22rem;
            color: #999999;
            display: flex;
        }

        .global-location .location .loc-btn {
            position: absolute;
            height: 0.8rem;
            top: 0;
            right: 0;
            font-size: 0.28rem;
            line-height: 0.8rem;
            padding: 0 0.22rem;
            color: #f3f3f3;
            background: #FF6C89;
        }

        .global-location .close {
            position: absolute;
            top: 0.04rem;
            left: 0.04rem;
            width: 0.32rem;
            height: 0.32rem;
            display: block;
            background: #f3f3f3 url("/static/valentine/2021/img/叉.png") no-repeat;
            background-size: cover;
        }

        .hr {
            height: 1px;
        }

        .tips {
            text-align: center;
            display: block;
            width: 100%;
            max-width: 750px;
            height: 0.33rem;
            line-height: 0.33rem;
            color: #f6819f;
            font-size: 0.24rem;
            margin: 0 auto;
            padding-top: 0.3rem;
        }
    </style>
</head>
<body>
<div class="content-box">
    <div class="top-box">
        <div class="left-box avatar-box">
            <img onerror="onerror=null;src='{$oss}/avatar_default_2.png'" src="{if strpos($result.avatar1,'http')=== false}{$oss}/{/if}{$result.avatar1}"
                 class="left-img"
                 alt="">
            <p class="name">{$result.nickname1}</p>
        </div>
        <div class="with-icon"></div>
        <div class="right-box avatar-box">
            <img onerror="onerror=null;src='{$oss}/avatar_default_2.png'" src="{if strpos($result.avatar1,'http')=== false}{$oss}/{/if}{$result.avatar2}" alt=""
                 class="right-img">
            <p class="name">{$result.nickname2}</p>
        </div>
        <div class="result-score">
            <div class="title1">发展潜力得分</div>
            <div class="with-score">{$total_score}</div>
            <div class="left1-box text-b">
                <p class="p1">{$data.harmoniousAndConflict[0]}%</p>
                <p class="p2">和谐</p>
            </div>
            <div class="progess-box">
                <div class="progess-left icon-af"></div>
                <div class="progess-right"></div>
            </div>
            <div class="right1-box text-b">
                <p class="p1">{$data.harmoniousAndConflict[1]}%</p>
                <p class="p2">冲突</p>
            </div>
        </div>
    </div>
    <div class="content-box">
        <div class="tips">{$tips}</div>
        <div class="item">
            <div class="item-title">{$data.if_love_status==1?'今生有缘':'假如恋爱'}</div>
            <div class="item-value">{$data.if_love}</div>
        </div>
        <span class="hr"></span>
        <div class="item">
            <div class="item-title1 gx">最合适的关系</div>
            {foreach name="$data.relation" item="v"}
            <div class="item-option">
                <div class="name">{$v.name_cn}</div>
                <div class="progess-box">
                    <div class="progess-index" style="width:{$v.per*100}%"></div>
                </div>
                <div class="val">{:intval($v.per*100)}%</div>
            </div>
            {/foreach}
        </div>
        <span class="hr"></span>
        <div class="item">
            <div class="item-title1 gx">关系发展潜力</div>
            <div class="tips-box">更多合盘结果在准了APP中免费查看</div>
        </div>
        <span class="hr"></span>
        <div class="item">
            <div class="item-title1 gx">整体关系评价</div>
            <div class="tips-box">更多合盘结果在准了APP中免费查看</div>
        </div>
        <span class="hr mt20 mb10"></span>
        <div class="item">
            <div class="item-title1 gx">双方在关系中的收获</div>
            <div class="tips-box">更多合盘结果在准了APP中免费查看</div>
        </div>

        <div class="padding-bottom60"></div>

        <div class="global-location">
            <img src="https://oss.goddessxzns.com/picture/uploads/logo.png?x-oss-process=style/show" alt="logo" class="logo">
            <div class="title">准了APP</div>
            <div class="desc">前往“准了APP”查看更多星座知识</div>
            <a href="https://xingzuonvshen.datasink.sensorsdata.cn/t/z" class="location">
                <span class="loc-btn">打开APP</span>
                <span class="close"></span>
            </a>
        </div>

    </div>
</div>
</body>
<script src="{$oss}active/seven/js/jquery-v2.1.1.min.js"></script>
<script>
    $('.global-location .close').click(function () {
        $(this).parent().parent().hide();
        return false;
    })

    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=1279195343&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
{include file="../apps/web/view/public/sensors.html" /}
</html>
